<template>
	<view class="tola">
		<!-- <image src="" mode=""></image> -->
	<!-- 	<image src="../../static/images/back.png" mode="" class="back-class" @click="backFn"></image>
		<view class="center-vip">
			会员中心
		</view> -->
		<image src="https://shengyue.yaoyunxin.cn/uploads/images/20240127/20240127105339863043663.png" mode="widthFix"
			class="bg-class" v-show="number1==1"></image>
		<image src="https://shengyue.yaoyunxin.cn/uploads/images/20240127/202401271053453997b3463.png" mode="widthFix"
			class="bg-class" v-show="number1==2"></image>
		<view class="bottom">
			<view class="bottom-top">
				<view class="top-left" @click="checkedFn(1)">
					<image src="../../static/images/hui.png" mode="" class="vip" v-show="number1==1"></image>
					<view :class="[number1==1?'check':'nocheck']">
						查看联系方式
					</view>
				</view>
				<view class="top-right" @click="checkedFn(2)">
					<image src="../../static/images/hui.png" mode="" class="vip" v-show="number1==2"></image>
					<view :class="[number1==2?'check':'nocheck']">
						发布信息置顶
					</view>
				</view>
			</view>
			<view class="bottom-bottom">
			<!-- 	<view class="bottom-left" v-if="number1==1">
					<view class="goods-list1" :class="{goods_active1: btn_status1 == index}"
						@click="changeClass1(index,item)" v-for="(item,index) in phoneList">
						<view class="goods-list-top">
							{{item.name}}
						</view>
						<view class="goods-list-money">
							￥{{item.price}}
						</view>
						<view class="goods-list-hua">
							￥{{item.huaxian}}
						</view>
						<view class="goods-list-zhi">
							{{item.title}}
						</view>
					</view>
				</view> -->
				<view class="bottom-right" v-if="number1==1">
					<scroll-view class="goods_boom" scroll-x="true">
						<view class="goods-list" :class="{goods_active: btn_status1 == index}"
							@click="changeClass1(index,item)" v-for="(item,index) in phoneList">
							<view class="goods-list-top">
								{{item.name}}
							</view>
							<view class="goods-list-money">
								￥{{item.price}}
							</view>
							<view class="goods-list-hua">
								￥{{item.huaxian}}
							</view>
							<view class="goods-list-zhi">
								{{item.title}}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="bottom-right" v-if="number1==2">
					<scroll-view class="goods_boom" scroll-x="true">
						<view class="goods-list" :class="{goods_active: btn_status == index}"
							@click="changeClass(index,item)" v-for="(item,index) in information">
							<view class="goods-list-top">
								{{item.name}}
							</view>
							<view class="goods-list-money">
								￥{{item.price}}
							</view>
							<view class="goods-list-hua">
								￥{{item.huaxian}}
							</view>
							<view class="goods-list-zhi">
								{{item.title}}
							</view>
						</view>
					</scroll-view>
				</view>
				
				<view class="flex1">
					<view class="custom-style" :loading="isLock"  @click="rechargeLock">
						立即开通
					</view>
					<!-- <u-button :loading="isLock" class="custom-style" shape="circle" @click="rechargeLock">
					    立即开通
					</u-button> -->
				</view>
			</view>
		</view>
		<payment
		    v-model:show="payState.showPay"
		    v-model:show-check="payState.showCheck"
		    :order-id="payState.orderId"
		    :from="payState.from"
		    :redirect="payState.redirect"
		    @success="handlePaySuccess"
		    @fail="handlePayFail"
		/>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	import { vipList } from '@/api/user'
	import { onShow } from '@dcloudio/uni-app'
	import { useLockFn } from '@/hooks/useLockFn'
	import { recharge, rechargeConfig } from '@/api/recharge'
	onShow(()=>{
		getviplist()
		
	})
	const backFn = () => {
		uni.navigateBack(-1)
	}
	
	const rechange=ref({
		money:null,
		id:null
	})
	// tab切换
	const number1 = ref(1)
	const checkedFn = (n) => {
		number1.value = n;
		if(number1.value==1){
			
			rechange.value.money=phoneList.value[0].price
			rechange.value.id=phoneList.value[0].id
			btn_status1.value=0
			btn_status.value=0
		}else if(number1.value==2){
			rechange.value.money=information.value[0].price
			rechange.value.id=information.value[0].id
			btn_status1.value=0
			btn_status.value=0
		}
		console.log(rechange.value);
	}

	// 会员选择
	const btn_status = ref(0)
	const changeClass = (index, item) => {
		btn_status.value = index
		rechange.value.money=item.price
		rechange.value.id=item.id
	}

	const btn_status1 = ref(0)
	const changeClass1 = (index, item) => {
		btn_status1.value = index
		rechange.value.money=item.price
		rechange.value.id=item.id
	}
	
	const phoneList=ref([])
	const information=ref([])
	const getviplist=async()=>{
		let data=await vipList()
		data.data.forEach(item=>{
			if(item.equity==2){
				phoneList.value.push(item)
			}else{
				information.value.push(item)
			}
		})
		rechange.value.money=phoneList.value[0].price
		rechange.value.id=phoneList.value[0].id
	}
	
	
	const payState = reactive({
	    orderId: '',
	    from: '',
	    showPay: false,
	    showCheck: false,
	    redirect: '/packages/pages/recharge/recharge'
	})
	const { isLock, lockFn: rechargeLock } = useLockFn(async () => {
	    // const minNum = wallet.min_amount
	    // if (!money.value) return uni.$u.toast('请输入充值金额')
	    // if (minNum == 0 && Number(money.value) == minNum) {
	    //     return uni.$u.toast(`充值金额必须大于0`)
	    // }
	    // if (Number(money.value) < minNum) return uni.$u.toast(`最低充值金额${minNum}`)
	    const data = await recharge({
	        money: rechange.value.money,
			vip:rechange.value.id
	    })
	    payState.orderId = data.order_id
	    payState.from = data.from
	    payState.showPay = true
	})
	
	const handlePaySuccess = async () => {
	    payState.showPay = false
	    payState.showCheck = false
	    uni.navigateTo({
	        url: `/pages/payment_result/payment_result?id=${payState.orderId}&from=${payState.from}`
	    })
	}
	
	const handlePayFail = async () => {
	    uni.$u.toast('支付失败')
	}
	
</script>

<style scoped lang="scss">
	.flex1{
		display: flex;
		justify-content: center;
	}
	.custom-style{
		position: fixed;
	width: 694rpx;
	transform: translate(0,-50%);
	bottom: 50rpx;
	height: 104rpx;
	background: linear-gradient(90deg, #59C381 0%, #61D59A 42%, #6AE9B5 100%);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	text-align: center;
	line-height: 104rpx;
	font-size: 40rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	// margin-top: 410rpx;
	
	}
	.goods_boom {
		width: 100%;
		white-space: nowrap;
		padding-top: 50rpx;
		padding-left: 30rpx;

	}
	
	.bottom-left{
		display: flex;
		justify-content: space-evenly;
	}

	.goods-list1 {
		margin-top: 50rpx;
		width: 336rpx;
		height: 388rpx;
		background: #F6F6F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 2rpx solid #E6E6E6;
		display: inline-block;
		// margin-right: 20rpx;
		
		text-align: center;
		padding-top: 60rpx;
		padding-bottom: 32rpx;
		padding-right: 20rpx;
		padding-left: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		box-sizing: border-box;
		.goods-list-top {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.goods-list-money {
			padding-top: 40rpx;
			padding-bottom: 40rpx;
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #039138;
		}

		.goods-list-hua {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #AAAAAA;
			padding-bottom: 28rpx;
			text-decoration: line-through;
		}

		.goods-list-zhi {
			border-top: 2rpx solid #E6E6E6;
			padding-top: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;

		}
	}

	.goods_active1 {
		width: 336rpx;
		height: 388rpx;
		background: linear-gradient(180deg, #06BE7C 0%, rgba(6, 190, 124, 0) 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 4rpx solid #06BE7C;
		display: inline-block;
		margin-right: 20rpx;
		box-sizing: border-box;
		.goods-list-top {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #039138;
		}

		.goods-list-money {
			padding-top: 40rpx;
			padding-bottom: 40rpx;
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #039138;
		}

		.goods-list-hua {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #AAAAAA;
			padding-bottom: 28rpx;
			text-decoration: line-through;
		}

		.goods-list-zhi {
			border-top: 2rpx solid #E6E6E6;
			padding-top: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #039138;

		}
	}

	.goods-list {
		width: 280rpx;
		height: 388rpx;
		background: #F6F6F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 2rpx solid #E6E6E6;
		display: inline-block;
		margin-right: 20rpx;
		text-align: center;
		padding-top: 60rpx;
		padding-bottom: 32rpx;
		padding-right: 20rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
		.goods-list-top {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.goods-list-money {
			padding-top: 40rpx;
			padding-bottom: 40rpx;
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #039138;
		}

		.goods-list-hua {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #AAAAAA;
			padding-bottom: 28rpx;
			text-decoration: line-through;
		}

		.goods-list-zhi {
			border-top: 2rpx solid #E6E6E6;
			padding-top: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;

		}
	}

	.goods_active {
		width: 280rpx;
		height: 388rpx;
		background: linear-gradient(180deg, #06BE7C 0%, rgba(6, 190, 124, 0) 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 4rpx solid #06BE7C;
		display: inline-block;
		margin-right: 20rpx;
		box-sizing: border-box;
		.goods-list-top {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #039138;
		}

		.goods-list-money {
			padding-top: 40rpx;
			padding-bottom: 40rpx;
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #039138;
		}

		.goods-list-hua {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #AAAAAA;
			padding-bottom: 28rpx;
			text-decoration: line-through;
		}

		.goods-list-zhi {
			border-top: 2rpx solid #E6E6E6;
			padding-top: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #039138;

		}
	}

	.nocheck {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #AAAAAA;
	}

	.check {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #333333;

	}


	.back-class {
		width: 48rpx;
		height: 48rpx;
		position: fixed;
		top: 108rpx;
		left: 32rpx;
	}

	.bg-class {
		width: 100%;
	}

	.center-vip {
		width: 48rpx;
		height: 48rpx;
		position: fixed;
		top: 108rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 136rpx;
		font-size: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.bottom {
		height: calc(100vh - 504rpx);
		background-color: #fff;
		position: fixed;
		top: 504rpx;
		width: 100%;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		box-shadow: 0rpx 16rpx 52rpx 0rpx #59C481;
		padding-top: 30rpx;

		.bottom-top {
			display: flex;

			.top-left {
				width: 50%;
				border-right: 2rpx #EEEEEE solid;
				display: flex;
				justify-content: center;

				.vip {
					width: 52rpx;
					height: 48rpx;
					margin-left: 10rpx;
				}
			}

			.top-right {
				display: flex;
				width: 50%;
				justify-content: center;

				.vip {
					width: 52rpx;
					height: 48rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>